<template>
    <el-form ref="activityForm" :model="activityQuery" label-width="100px" :rules="activityQueryRules">
        <el-form-item label="负责人" prop="ownerId">
            <el-select  v-model="activityQuery.ownerId" placeholder="请选择负责人" @change="handleSelect">
                <el-option v-for="item in resData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="activityQuery.name" />
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="activityQuery.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择创建时间" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="activityQuery.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择创建时间" />
        </el-form-item>
        <el-form-item label="活动预算" prop="cost">
            <el-input v-model="activityQuery.cost" />
        </el-form-item>
        <el-form-item label="活动描述" prop="description">
            <!-- <el-input v-model="userDetail.isAcountNoLocked" /> -->
            <el-input type="textarea" v-model="activityQuery.description"  aria-placeholder="请输入活动描述" />
        </el-form-item>
        <el-button type="primary" @click="submitForm('add')">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
    </el-form>

</template>
<script setup>
import { onMounted, ref } from 'vue'
import Request from '../http/Request';
import router from '../router/router';
const activityQuery = ref({
    ownerId: '', // 确保这里有初始值
    name: '',
    startTime: '',
    endTime: '',
    cost: '',
    description: ''
})

const resData=ref([])

const activityQueryRules = ref({
    ownerId: [
        { required: true, message: '请输入负责人', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
    ],

    startTime: [
        { required: true, message: '请输入开始时间', trigger: 'blur' },
    ],
    endTime: [
        { required: true, message: '请输入结束时间', trigger: 'blur' },
    ],
    cost: [
        { required: true, message: '请输入活动预算', trigger: 'blur' },
    ],
    description:[
        { required: true, message: '请输入活动描述', trigger: 'blur' },
    ]
})

const ownerName=ref('')

const loadOwer = () => {
    
    Request.doGet('/api/owner').then((res) => {
        if (res.code == 200) {
            resData.value = res.data
        }
        
    })
}
const handleSelect = (value) => {
   console.log(value)
   console.log(activityQuery.value)
}
const submitForm = (formName) => {
    console.log(activityQuery.value)
    if (router.currentRoute.value.query.id) {
        console.log(activityQuery.value)
        Request.doPut('/api/activity',activityQuery.value).then((res) => {
        if (res.code == 200) {
            console.log(res)
            router.go(-1)
        }
        })
    }else{
        Request.doPost('/api/activity', activityQuery.value).then((res) => {
        if (res.code == 200) {
            console.log(res)
            router.go(-1)
        }
    })
    }

}
const resetForm = () => {
    activityQuery.value = {
        ownerId: '', // 确保这里有初始值
        name: '',
        startTime: '',
        endTime: '',
        cost: '',
        description: ''
    }
}

onMounted(() => {

    loadOwer()
    if (router.currentRoute.value.query.id) {
        Request.doGet('/api/activity/'+ router.currentRoute.value.query.id).then((res) => {
            if (res.code == 200) {
                activityQuery.value.ownerId = res.data.ownerId
                activityQuery.value.name = res.data.name
                activityQuery.value.startTime = res.data.startTime
                activityQuery.value.endTime = res.data.endTime
                activityQuery.value.cost = res.data.cost
                activityQuery.value.description = res.data.description
                activityQuery.value.id = res.data.id
                
                console.log(activityQuery.value)
            }
        })
    }else{
        activityQuery.value = {
            ownerId: '', // 确保这里有初始值
            name: '',
            startTime: '',
            endTime: '',
            cost: '',
            description: ''
        }
    }

})

</script>
<style scoped>
.el-form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.el-form-item {
    width: 50%;
    margin-bottom: 30px;
}

</style>